<template>
  <div class="main-header-box">
      <el-card class="box-card" is-dot :body-style="{ padding: '5px',cursor:'pointer'}">
        <div @click="dialogVisible=true">
          <div>
            <img class="log" src="@/assets/image/setting.png" />
          </div>
          <div>{{$t('mainHeader.systemSetting')}}</div>
        </div>
      </el-card>
      <el-card class="box-card" :body-style="{ padding: '5px',cursor:'pointer'}">
        <div @click="selectConnectionDialogVisible=true">
          <div>
            <img class="log" src="@/assets/image/shell.png" />
          </div>
          <div>Shell</div>
        </div>
      </el-card>
      <el-card class="box-card" :title="$t('server.moreWonderful')" :body-style="{ padding: '5px',cursor:'not-allowed'}">
        <div>
          <img class="log" src="@/assets/image/more.png" />
        </div>
        <div>{{$t('mainHeader.more')}}</div>
      </el-card>
      <setting :dialogVisible="dialogVisible" @hideDialog="dialogVisible=false"></setting>
      <selectConnectionDialog :selectConnectionDialogVisible="selectConnectionDialogVisible" @selectCallback="selectCallback"></selectConnectionDialog>
      <shell :shellDrawerVisible="shellDrawerVisible" v-if="reloadShell" :redisClient="redisClient" :connection="connection" @close="closeShellBox"></shell>
  </div>
</template>

<script>
import setting from '@/components/dialog/settingDialog'
import selectConnectionDialog from '@/components/dialog/selectConnectionDialog'
import redisClient from '@/util/redis/redisClient'
import shell from '@/components/server/shell'
export default {
  components:{
    setting,selectConnectionDialog,shell
  },
  data(){
    return {
      dialogVisible:false,
      selectConnectionDialogVisible:false,
      shellDrawerVisible:false,
      connection:null,
      redisClient:null,
      reloadShell:false
    }
  },
  methods:{
    selectCallback(connection,visible){
      if(connection){
        //此处打开窗口传入连接准备进行连接
        const client=redisClient.createConnection(connection);
        if(client.status!='ready'){
          //准备就绪后打开shell窗口
          client.on('ready',()=>{
            this.redisClient=client
            this.connection=connection
            this.shellDrawerVisible=true
            this.reloadShell=true
          })
        }
      }
      this.selectConnectionDialogVisible=visible
    },
    closeShellBox(){
      this.shellDrawerVisible=false
      //防止动画被覆盖|延时销毁shell窗口
      setTimeout(()=>{
        this.reloadShell=false
      },200)
    }
  }
}
</script>

<style scoped>
.main-header-box{
  margin: 5px 0px;
}
.box-card div{
  text-align: center;
  font-size: 12px;
  margin-top: 6px;
}
.log{
  height: 25px;
  width: 25px;
  text-align: center;
}
.box-card{
  margin: 5px;
  width: 100px;
  display: inline-block;
  user-select: none;
  height: 75px;
}
.box-card:hover{
  transform:scale(1.1);
}
</style>